<template>
    <div class="navbar-container">
        <el-button class="navbar-switch" @click="updateCollapse('')" :icon="icon"></el-button>
        <Breadcrumb></Breadcrumb>
        <RightMenu></RightMenu>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Breadcrumb from "../Breadcrumb/Breadcrumb.vue";
import RightMenu from "../RightMenu/RightMenu.vue";
export default {
    data() {
        return {};
    },
    computed: {
        ...mapState(["isCollapse"]),
        icon: function () {
            if (this.isCollapse) {
                return "el-icon-s-unfold";
            } else {
                return "el-icon-s-fold";
            }
        },
    },
    methods: {
        ...mapMutations(["updateCollapse"]),
    },
    components: {
        Breadcrumb,
        RightMenu,
    },
};
</script>

<style scoped>
.navbar-container {
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    position: relative;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}

.navbar-switch {
    border: none;
    font-size: 20px;
}
.navbar-switch:hover,
.navbar-switch:focus {
    background: transparent;
    color: #606266;
}
</style>